<template>
	<div id="admin-list">
		<el-form :inline="true" class="demo-form-inline">
			<el-form-item label="联系信息">
				<el-input v-model="form.keyword" placeholder="输入管理员名称/手机"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit">查询</el-button>
				<el-button style="background:#ff9800; border-color:#ff9800;" type="primary" @click="addCom">添加人员</el-button>
				<el-button style="background:#ff5157; border-color:#ff5157;"  type="primary" @click="deleteAll">批量删除</el-button>
			</el-form-item>
		</el-form>
		<div class="table">
			 <el-table :data="tableData" style="width: 100%"   @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="50"></el-table-column>
				<el-table-column prop="name"  label="管理员名称"></el-table-column>
				<el-table-column prop="phone"  label="管理员手机"></el-table-column>
				<el-table-column prop="role"  label="权限">
					<template slot-scope="scope">
						<div v-if="roleOption.length">{{ roleOption.filter(item => item.id == scope.row.role)[0].name }}</div>
					</template>
				</el-table-column>
				<el-table-column prop="pname"  label="管理人员"></el-table-column>
				<el-table-column prop="status"  label="状态" width="70">
					<template slot-scope="scope">
						<div v-if="scope.row.status == 1">已启用</div>
						<div v-if="scope.row.status == 0">已禁用</div>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" width="330">
					<template slot-scope="scope">
						<el-button
						size="mini"
						type="success"
						style="background:#ff7a45; border-color:#ff7a45;"
						@click="rowpassword(scope.row.id)">密码重置</el-button>
						<el-button
						size="mini"
						type="success"
						@click="rowEdit(scope.row.id)" style="background:#42a7ff; border-color:#42a7ff;">编辑</el-button>
						<el-button
						v-if="scope.row.status == 1"
						size="mini"
						type="danger"
						@click="rowSwitch(scope.row.id,scope.row.status)">禁用</el-button>
						<el-button
						v-else
						size="mini"
						type="success"
						@click="rowSwitch(scope.row.id,scope.row.status)">启用</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
			v-if="tableData.length>0"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="currentPage"
				:page-size="pageSize"
				layout="total, prev, pager, next, jumper"
				:total="totalCount"
			></el-pagination>
		</div>

		 <el-dialog :close-on-click-modal="false" title="添加人员" :visible.sync="dialogAdd" width='600px' @close='close'  >
			 <el-form class="demo-form-inline">
				 <el-form-item label="单　位">
					 <casader ref="caAdd"></casader>
				</el-form-item>
				 <el-form-item label="名　称">
					<el-input v-model="formAdd.name" placeholder="请输入"></el-input>
				</el-form-item>
				 <el-form-item label="手　机">
					<el-input v-model="formAdd.phone" placeholder="请输入"></el-input>
				</el-form-item>
				 <el-form-item label="密　码">
					<el-input type="password" v-model="formAdd.password" placeholder="请输入"></el-input>
				</el-form-item>
				 <el-form-item label="权　限">
					<el-select v-model="formAdd.roleId" placeholder="请选择">
						<el-option
							v-for="item in roleOption"
							:key="item.id"
							:label="item.name"
							:value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				 <el-form-item label="管理人">
					<el-input v-model="formAdd.pname" placeholder="请输入"></el-input>
				</el-form-item>
			 </el-form>
		     <div style="width:70px;margin:0 auto" >
				<el-button type="primary" @click="saveAdd">保存</el-button>
		     </div>

		 </el-dialog>
		  <el-dialog :close-on-click-modal="false" title="修改" :visible.sync="dialogEdit" width='600px'>
			 <el-form  :model="formEdit" class="demo-form-inline">
				<el-form-item label="单　位">
					 <casader ref="caEdit"></casader>
				</el-form-item>
				 <el-form-item label="名　称">
					<el-input v-model="formEdit.name" placeholder="请输入"></el-input>
				</el-form-item>
				 <el-form-item label="手　机">
					<el-input v-model="formEdit.phone" placeholder="请输入"></el-input>
				</el-form-item>
				 <el-form-item v-if="0" label="密　码">
					<el-input type="password" v-model="formEdit.password" placeholder="请输入"></el-input>
				</el-form-item>
				 <el-form-item label="权　限">
					<el-select v-model="formEdit.roleId" placeholder="请选择">
						<el-option
							v-for="item in roleOption"
							:key="item.id"
							:label="item.name"
							:value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				 <el-form-item label="管理人">
					<el-input v-model="formEdit.pname" placeholder="请输入"></el-input>
				</el-form-item>
			 </el-form>
		     <div style="width:70px;margin:0 auto" >
				<el-button type="primary" @click="saveEdit">保存</el-button>
		     </div>

		 </el-dialog>
	</div>
</template>

<script>
import Casader from '../components/cascaderD';
	export default {
  	components: { Casader },
		 data() {
            return {
				url:'http://rap2.taobao.org:38080/app/mock/257124',
				//删除数组
				ids:[],
				//添加
				dialogAdd:false,
				form:{
					//管理员信息
					keyword:'',
				},
				//添加列表
				formAdd:{
					//单位名
					name:'',
					//单位id
					pid:'',
					phone:'',
					password:'',
					//角色id
					roleId:'',
					//管理人
					pname:'',
				},
				//添加列表
				formEdit:{
					id:'',
					//单位名
					name:'',
					//单位id
					pid:'',
					phone:'',
					password:'',
					//角色id
					roleId:'',
					//管理人
					pname:'',
				},
				//权限列表
				roleOption:[],
				//修改
				dialogEdit:false,
				currentPage: 1,
				pageSize: 10,
				totalCount: 1000,
				tableData:[],
				a:[
					{
						x:5,
						y:6
					}
				],
				aid:0,
				selectedOptions: [1,2,4,7],
				props: {
					lazy: true,
					checkStrictly:true,
					lazyLoad (node, resolve) {
						const { level } = node;
						setTimeout(() => {
						const nodes = Array.from({ length: level + 1 })
							.map(item => ({
							value: ++id,
							label: `选项${id}`,
							leaf: level >= 15
							}));
						console.log(nodes,22);
						// 通过调用resolve将子节点数据返回，通知组件数据加载完成
						resolve(nodes);
						console.log(self.aid);
						}, 50);
					}
				},

            }
		},
		created() {
			this.init();
		},
		methods:{
			init(){
				let self =this;
				this.getRole();
				this.getList();
			},
			rowpassword(id){
				let self = this;
				self.$http.get(`/admin/reset?id=${id}`).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
						self.$message.success(res.message)

                    }else {
						self.$message.error(res.message)
					}


                })
			},
			//获取权限列表
			getRole(){
				let self = this;
				self.$http.get('/admin/role').then((response) => {
                    let res = response.data
                    if(res.code == '200') {
						console.log(res,111222)
						self.roleOption = res.data;

                    }else {
						self.$message.error(res.message)
					}


                })
			},
			changeId(val,b){
				console.log(val,22222);
				console.log(b,22222);
			},
			handleItemChange(val) {
				console.log(val,111);
				// console.log('active item:', val);
				// setTimeout(_ => {
				// if (val.indexOf('江苏') > -1 && !this.options2[0].cities.length) {
				// 	this.options2[0].cities = [{
				// 	label: '南京'
				// 	}];
				// } else if (val.indexOf('浙江') > -1 && !this.options2[1].cities.length) {
				// 	this.options2[1].cities = [{
				// 	label: '杭州'
				// 	}];
				// }
				// }, 300);
			},
			//查询下级单位
			getSelect(id){
				let self = this;
				if(!id){
					id = '';
				}
				self.$http.get('/learn/class/sub?id='+id).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
						// data:[
						// 	{
						// 		name:'',
						// 		id:1
						// 	}
						// ]
						self.tableData = res.data.content
						self.totalCount = res.data.total
						console.log(self.tableData,111)

                    }else {
						self.$message.error(res.message)
					}


                })
			},
			//获取列表
			getList(){
				let self = this;
				let keyword = self.form.keyword;
				self.$http.get('/admin/list?keyword='+keyword+'&pageNum='+self.currentPage+'&pageSize='+self.pageSize).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
						console.log(res,1);
						self.tableData = res.data.content
						self.totalCount = res.data.total
						console.log(self.tableData,111)

                    }else {
						self.$message.error(res.message)
					}


                })
			},
			handleSelectionChange(rows){
				console.log(rows,1111);
				this.ids = rows.map(item => item.id);
			},
			//查询
			onSubmit(){
				this.currentPage = 1;
				this.getList();
			},
			//下载
			download(){},
			//关闭
			close(){
				let self = this;
				let formAdd = {
					//单位名
					name:'',
					//单位id
					pid:'',
					phone:'',
					password:'',
					//角色id
					roleId:'',
					//管理人
					pname:'',
				};
				self.$refs.caAdd.value = '';
				self.formAdd = formAdd;
			},
			//禁用
			rowSwitch(id,status){
				let self = this;
				self.$http.get(`/admin/status?id=${id}&status=${Number(!status)}`).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
						self.$message.success(res.message)
						self.getList()
                    }else {
						self.$message.error(res.message)
					}
                }).catch(err => {
                    self.$message.error(res.message)
                })
			},
			//批量删除
			deleteAll(){
				let self = this
				let ids = self.ids;
				console.log(ids,1122);
				if(!ids.length){
					self.$message.error('请选择要删除的数据');
					return;
				}
				self.$confirm('是否删除选中?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					self.$http.post('/admin/delete',ids).then((response) => {
						let res = response.data
						if(res.code == '200') {
							self.$message.success('删除成功')
							self.ids = [];
							self.currentPage = 1;
							self.getList();

						}else {
							self.$message.error(res.message)
						}


					},(err) => {
						console.log('err');
					})
				}).catch(() => {
				})
			},
			//添加单位
			addCom(){
				this.dialogAdd = true;
			},
			//添加单位保存
			saveAdd(){
				let self = this
				let pid = this.$refs.caAdd.cx();
				self.formAdd.pid = pid;
				console.log(pid,111);
				if(pid == ''){
					//self.$message.warning('请选择单位')
					//return
				}
				if (self.formAdd.name == '') {
					self.$message.warning('请输入管理员账号')
					return
				}
				if (self.formAdd.phone == '') {
					self.$message.warning('请输入手机号')
					return
				}
				if (self.formAdd.password == '') {
					self.$message.warning('请输入密码')
					return
				}
				if (self.formAdd.roleId == '') {
					self.$message.warning('请选择权限')
					return
				}
				if (self.formAdd.pname == '') {
					self.$message.warning('请输入管理员姓名')
					return
				}

                self.$http.post('/admin/add',self.formAdd).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
						self.$message.success('保存成功')
						self.dialogAdd = false
						this.getList()
                    }else {
						self.$message.error(res.message)
					}
                }).catch(err => {
                    self.$message.error(res.message)
                })
			},
			//修改单位
			rowEdit(id){
				let self = this;
				self.$http.get(`/admin/info?id=${id}`).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
						console.log(res,222);
						let av = res.data.path;
						console.log(av,333);
						self.formEdit.id = id;
						// let newav = av.filter((item,index) => index > 0);
						self.$refs.caEdit.changeValue(av)
						let formEdit = {
							id:id,
							//单位名
							name:res.data.name,
							//单位id
							pid:res.data.pid,
							phone:res.data.phone,
							password:'',
							//角色id
							roleId:res.data.role,
							//管理人
							pname:res.data.pname,
						};
						self.formEdit = formEdit;

                    }else {
						self.$message.error(res.message)
					}


                })
				this.dialogEdit = true;
			},
			//编辑保存
			saveEdit(id){
				let self = this
				let pid = this.$refs.caEdit.cx();
				self.formEdit.pid = pid;
				console.log(pid,111);
				if(pid == ''){
					//self.$message.warning('请选择单位')
					//return
				}
				if (self.formEdit.name == '') {
					self.$message.warning('请输入管理员账号')
					return
				}
				if (self.formEdit.phone == '') {
					self.$message.warning('请输入手机号')
					return
				}
				// if (self.formEdit.password == '') {
				// 	self.$message.warning('请输入密码')
				// 	return
				// }
				if (self.formEdit.roleId == '') {
					self.$message.warning('请选择权限')
					return
				}
				if (self.formEdit.pname == '') {
					self.$message.warning('请输入管理员姓名')
					return
				}
				self.$http.post('/admin/update',self.formEdit).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
						self.$message.success('保存成功')
						self.dialogEdit = false
						this.getList()

                    }else {
						self.$message.error(res.message)
					}
                })
			},
			//删除单位
			rowDelete(id){
				let self = this
				self.$confirm('是否删除选中?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					self.$http.get('/learn/class/delete?id='+id).then((response) => {
						let res = response.data
						if(res.code == '200') {
							self.$message.success('删除成功')
							this.getList()

						}else {
							self.$message.error(res.message)
						}


					},(err) => {
						console.log('err');
					})
				}).catch(() => {
				})
			},
			//导入人数
			addPeo(){},
			//分页
			handleSizeChange: function (size) {
				this.pageSize = size;
			},
			handleCurrentChange: function(currentPage) {
				this.currentPage = currentPage
				this.getList();
			},
		},
	}
</script>

<style scoped>
.el-input>>>.el-input__inner{
	width: 350px;
}
/deep/ .el-table__body, /deep/ .el-table__header{
	width: auto!important;
}
.table{
	margin: 20px 0;
	width: 100%;
}
.el-pagination{
	text-align: right;
}
</style>
<style lang="scss">
	#admin-list{
		.el-cascader{
			width:auto!important;
			margin-right:0!important;
		}
		.el-form-item{
			.el-input{
				display: inline;
				.el-input__inner{
					width:500px;
				}
			}
			.el-input.el-input--suffix{
				display:block;
			}
		}
		.el-select{

		}
	}
</style>
